import React from 'react';
import { Button, Modal, Input } from 'antd';
import { useState } from 'react';

// 自定义钩子
function useModal() {
    const [visible, setVisible] = useState(false);
    const [inputValue, setInputValue] = useState('');
  
    const showModal = () => {
      setVisible(true);
    };
  
    const handleOk = () => {
      console.log('Input Value:', inputValue);
      setVisible(false);
    };
  
    const handleCancel = () => {
      setVisible(false);
    };
  
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      setInputValue(e.target.value);
    };
  
    return { visible, showModal, handleOk, handleCancel, inputValue, handleInputChange };
  }

const MessageRespond: React.FC = () => {
  const { visible, showModal, handleOk, handleCancel, inputValue, handleInputChange } = useModal();

  return (
    <div>
      <Button type="primary" onClick={showModal}>
        回复
      </Button>
      <Modal
        title="回复内容"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认回复"
        cancelText="取消"
      >
        <Input
          placeholder="请输入回复内容"
          value={inputValue}
          onChange={handleInputChange}
          style={{ marginBottom: 10 }}
        />
      </Modal>
    </div>
  );
};

export default MessageRespond;